<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>title</title>
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="bootstrap/js/bootstrap-paginator.js"></script>
</head>

<body>
<div class="container">
    <div th:replace="common/head.html"></div>
    <div th:replace="common/menu.html"></div>
    <div th:replace="common/nav.html"></div>
    <div class="row-fluid">
        <form action="javascript:void(0)" class="d-flex flex-column" id="stuSearchForm">
            <div class="form-group row form-group d-flex flex-row justify-content-center">

                <label class="col-sm-1 col-form-label" for="inpNo">学号</label>
                <div class="col-sm-3">
                    <input class="form-control" type="text" name="uNo" id="inpNo">
                </div>
                <label class="col-sm-1 col-form-label" for="inpName">姓名</label>
                <div class="col-sm-3">
                    <input class="form-control" type="text" name="uName" id="inpName">
                </div>
            </div>
            <div class="form-group row form-group d-flex flex-row justify-content-center">
                <label class="col-sm-1 col-form-label" for="inpSex">性别</label>
                <div class="col-sm-3">
                    <select class="form-control" name="uSex" id="inpSex">
                        <option value="null">请选择性别</option>
                        <option th:each="sItem : ${SexList}" th:value="*{sItem.Value}"
                                th:utext="*{sItem.Value}"></option>
                    </select>
                </div>

                <label class="col-sm-1 col-form-label" for="inpNation">民族</label>
                <div class="col-sm-3">
                    <select class="form-control" name="uNation" id="inpNation">
                        <option value="null">请选择民族</option>
                        <option th:each="nItem : ${NationList}" th:value="*{nItem.Value}"
                                th:utext="*{nItem.Value}"></option>
                    </select>
                </div>
            </div>

            <div class="form-group row form-group d-flex flex-row justify-content-center">
                <label class="col-sm-1 col-form-label" for="inpGrade">所在年级</label>
                <div class="col-sm-3">
                    <select class="form-control" name="uGrade" id="inpGrade">
                        <option value="null">请选择年级</option>
                        <option th:each="gItem : ${GradeList}" th:value="*{gItem.GradeID}"
                                th:utext="*{gItem.Name}"></option>
                    </select>
                </div>
                <label class="col-sm-1 col-form-label" for="inpClass">所在班级</label>
                <div class="col-sm-3">
                    <select class="form-control" name="uClass" id="inpClass">
                        <option value="null">请选择班级</option>
                        <option th:each="cItem : ${ClassList}" th:value="*{cItem.ClassID}"
                                th:utext="*{cItem.Name}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group row form-group d-flex flex-row justify-content-center">
                <label class="col-sm-1 col-form-label" for="inpBirDay">出生日期</label>
                <div class="col-sm-3">
                    <input class="form-control" type="date" name="uBirDayBegin" id="inpBirDay">
                </div>
                到
                <div class="col-sm-3">
                    <input class="form-control" type="date" name="uBirDayOver">
                </div>
            </div>

            <div class="form-group row form-group d-flex flex-row justify-content-center">
                <label class="col-sm-1 col-form-label" for="inpInDate">入学时间</label>
                <div class="col-sm-3">
                    <input class="form-control" type="date" name="uInDateBegin" id="inpInDate">
                </div>
                到
                <div class="col-sm-3">
                    <input class="form-control" type="date" name="uInDateOver">
                </div>
            </div>
            <div class="form-group d-flex flex-row justify-content-center">
                <div class="col-sm-2 d-flex flex-row justify-content-between">
                    <input class="btn btn-primary" type="submit" value="查询">
                    <input class="btn btn-primary" type="reset" value="重置">
                </div>
            </div>
        </form>
    </div>

    <button class="btn btn-primary btn-sm" id="toAdd">添加学生</button>
    <div class="row-fluid" id="data_refresh" th:fragment="data_refresh">
        <table class="table table-striped" style="margin-top:15px">
            <thead class="thead-dark">
            <tr>
                <th scope="col" class="text-center">序号</th>
                <th scope="col" class="text-center">学号</th>
                <th scope="col" class="text-center">姓名</th>
                <th scope="col" class="text-center">性别</th>
                <th scope="col" class="text-center">出生日期</th>
                <th scope="col" class="text-center">入学时间</th>
                <th scope="col" class="text-center">所在班级</th>
                <th scope="col" class="text-center">所在年级</th>
                <th scope="col" class="text-center">操作</th>
            </tr>
            </thead>

            <tbody>
            <tr th:each="sInfo,iterStat : ${stuInfList}" class="text-center">
                <td scope="row" th:utext="${iterStat.index+1}"></td>
                <td th:utext="${sInfo.NO}"></td>
                <td th:utext="${sInfo.Name}"></td>
                <td th:utext="${sInfo.Sex}"></td>
                <td th:utext="${#dates.format(sInfo.Birthday,'yyyy-MM-dd')}"></td>
                <td th:utext="${#dates.format(sInfo.Admission_Time,'yyyy-MM-dd')}"></td>
                <td th:utext="${sInfo.classInf.Name+'班'}"></td>
                <td th:utext="${sInfo.gradeInf.Name}"></td>
                <td class="d-flex flex-row justify-content-around">
                    <input class="btn btn-primary btn-sm" th:onclick="toDetails([[${sInfo.NO}]])"
                        type="button" value="查看详细信息">
                    <input class="btn btn-primary btn-sm" th:onclick="toModify([[${sInfo.NO}]])"
                        type="button" value="修改">
                    <input class="btn btn-danger btn-sm" data-toggle="modal" data-target="#confirmDel" 
                        th:onclick="toDelete([[${sInfo.NO}]])"  type="button" value="删除">
                </td>
            </tr>
            </tbody>
        </table>

        <div id="pageDiv"></div>
        <script type="text/javascript" th:inline="javascript">
            var SearchMode = [[${SearchMode}]];
            var TotalPage = [[${TotalPage}]];
            var offset = [[${offset}]];
            paginator.init("pageDiv", TotalPage, "offset", SearchMode);
            paginator.show(offset);
        </script>
    </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="confirmDel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <!-- 定义隐藏Input存储值 -->
                <input type="hidden" id="delStuNo">
                
                <h5 class="modal-title">确认删除</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>您确定删除该学生信息？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger delStuInfBtn" data-dismiss="modal">删除</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="sucModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">删除成功</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>指定的学生信息现已删除成功！</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="DBErr">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">数据库错误</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>数据库写入数据出现问题，请联系管理员进行维护！</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="inpNullErr">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">空数据</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>删除的学生学号为空，请重试！</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="js/StudentPage.js"></script>

</html>
